﻿﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Aila">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="author" content="HiBootstrap">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>服务编排系统</title>
    <link rel="icon" th:href="@{assets/images/a4.jpg}" type="image/png" sizes="16x16">

    <!-- bootstrap css -->
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.min.css}" type="text/css" media="all" />
    <!-- animate css -->
    <link rel="stylesheet" th:href="@{assets/css/animate.min.css}" type="text/css" media="all" />
    <!-- owl carousel css -->
    <link rel="stylesheet" th:href="@{assets/css/owl.carousel.min.css}" type="text/css" media="all" />
    <link rel="stylesheet" th:href="@{assets/css/owl.theme.default.min.css}" type="text/css" media="all" />
    <!-- meanmenu css -->
    <link rel="stylesheet" th:href="@{assets/css/meanmenu.min.css}" type="text/css" media="all" />
    <!-- magnific popup css -->
    <link rel="stylesheet" th:href="@{assets/css/magnific-popup.min.css}" type="text/css" media="all" />
    <!-- boxicons css -->
    <link rel='stylesheet' th:href='@{assets/css/boxicons.min.css}' type="text/css" media="all" />
    <!-- Line Awesome CSS -->
    <link rel='stylesheet' th:href='@{assets/css/line-awesome.min.css}' type="text/css" media="all" />
    <!-- flaticon css -->
    <link rel='stylesheet' th:href='@{assets/css/flaticon.css}' type="text/css" media="all" />
    <!-- style css -->
    <link rel="stylesheet" th:href="@{assets/css/style.css}" type="text/css" media="all" />
    <!-- responsive css -->
    <link rel="stylesheet" th:href="@{assets/css/responsive.css}" type="text/css" media="all" />
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div th:replace="~{common/common::topbar}"></div>
<!-- service-section -->
<section class="home-service-section p-tb-100">
    <div class="container">
        <div class="section-title">
            <h2><font style="vertical-align: inherit;">原子服务配置 </font></h2>
            <p><font style="vertical-align: inherit;">请选择本产品所需要的原子服务</font></p>
        </div>
        <div class="home-pricing-content">
            <div class="home-pricing-category">
                <table>
                    <thead>
                    <tr class="orange-gradient">
                        <th><font style="vertical-align: inherit;">服务序号</font></th>
                        <th><font style="vertical-align: inherit;">服务名 </font></th>
                        <th><font style="vertical-align: inherit;">服务描述</font></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="atomic : ${atomics}">
                        <td th:text="${atomic.getId()}"></td>
                        <td th:text="${atomic.getServeName()}"></td>
                        <td th:text="${atomic.getServeInfo()}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<div class="row align-items-end">
    <div class="col-sm-12 col-md-12 col-lg-5">
        <div class="home-facility-image pl-20">
            <div class="home-facility-item faq-block-image pb-30">
                <img src="assets/images/contact-comment.png" alt="评论">
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-7">
        <div class="home-facility-item pb-30">
            <div class="blog-comment-leave-area contact-comment-leave-area">
                <h3 class="sub-section-title"><font style="vertical-align: inherit;">请选择原子服务</font></h3>
                <div class="blog-comment-input-area mt-40">
                    <form th:action="@{/publishProduct}">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group mb-30 has-error">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="flaticon-email"></i></span>
                                        </div>
                                        <textarea name="msg" class="form-control" id="msg" rows="5" required=""  placeholder="按顺序填入你所选择的原子服务,如 1,2,3,4,5 "></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <button class="btn1 orange-gradient btn-with-image disabled" type="submit" style="pointer-events: all; cursor: pointer;">
                                    <i class="flaticon-login"></i>
                                    <i class="flaticon-login"></i><font style="vertical-align: inherit;">
                                    发布
                                </font></button>
                                <div id="msgSubmit"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- .end service-section -->

<div th:replace="~{common/common::footer}"></div>

<!-- essential js -->
<script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{assets/js/popper.min.js}"></script>
<script th:src="@{assets/js/bootstrap.min.js}"></script>
<script th:src="@{assets/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{assets/js/owl.carousel.min.js}"></script>
<script th:src="@{assets/js/jquery.ajaxchimp.min.js}"></script>
<script th:src="@{assets/js/form-validator.min.js}"></script>
<script th:src="@{assets/js/contact-form-script.js}"></script>
<script th:src="@{assets/js/jquery.meanmenu.min.js}"></script>
<script th:src="@{assets/js/jquery.waypoints.js}"></script>
<script th:src="@{assets/js/counter-up.js}"></script>
<script th:src="@{assets/js/script.js}"></script>
</body>
</html>
